<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {{ 'APP.CONVERSION.PANEL.HEADING' | translate }}
                </h4>
            </div>
            <div class="panel-body">
                <form name="convertForm">
                    <div class="col-md-6">
                        <div class="form-group has-feedback"
                             ng-class="{'has-error': convertForm.input_format.$invalid && !convertForm.input_format.$pristine,
								'has-success': convertForm.input_format.$valid && convertForm.input_format.$dirty}">
                            <label for="input_format" class="control-label">
                                {{ 'APP.CONVERSION.LABEL.INPUT.FORMAT' | translate }}
                            </label>
                            <select id="input_format" name="input_format" class="form-control"
                                    ng-model="parameters.input.format"
                                    required
                                    ng-options="'APP.CONVERSION.FORM.OPTIONS.FORMATS' |  translate:row for row in formatsInput">
                            </select>
                            <div ng-show="convertForm.input_format.$invalid && convertForm.input_format.$dirty">
                                <span class="help-block mt5 ml10" ng-messages="convertForm.input_format.$error">
                                    <span ng-message="required">{{ 'APP.CONVERSION.LABEL.VALIDATION.INPUT.FORMAT.REQUIRED' | translate }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group has-feedback"
                             ng-class="{'has-error': convertForm.input_snippet.$invalid && !convertForm.input_snippet.$pristine,
								'has-success': convertForm.input_snippet.$valid && convertForm.input_snippet.$dirty}">
                            <label for="input_snippet" class="control-label">
                                {{ 'APP.CONVERSION.LABEL.INPUT.SNIPPET' | translate }}
                            </label>
                            <textarea id="input_snippet" name="input_snippet" class="form-control" style="resize:vertical;"
                                      ng-model="parameters.input.snippet"
                                      ng-disabled="parameters.input.format.format === 'info'"
                                      rows="13" ng-required="parameters.input.format.format !== 'info'"></textarea>
                            <span class="fa form-control-feedback"
                                  ng-class="{'fa-times': convertForm.input_snippet.$invalid && convertForm.input_snippet.$dirty,
											 'fa-check': !convertForm.input_snippet.$invalid && convertForm.input_snippet.$dirty}"></span>
                            <div ng-show="convertForm.input_snippet.$invalid && convertForm.input_snippet.$dirty">
                                <span class="help-block mt5 ml10" ng-messages="convertForm.input_snippet.$error">
                                    <span ng-message="required">{{ 'APP.CONVERSION.LABEL.VALIDATION.INPUT.SNIPPET.REQUIRED' | translate }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group has-feedback"
                             ng-class="{'has-error': convertForm.output_format.$invalid && !convertForm.output_format.$pristine,
								'has-success': convertForm.output_format.$valid && convertForm.output_format.$dirty}">
                            <label for="output_format" class="control-label">
                                {{ 'APP.CONVERSION.LABEL.OUTPUT.FORMAT' | translate }}
                            </label>
                            <select id="output_format" name="output_format" class="form-control"
                                    ng-model="parameters.output.format"
                                    required
                                    ng-options="'APP.CONVERSION.FORM.OPTIONS.FORMATS' |  translate:row for row in formatsOutput">
                            </select>
                            <div ng-show="convertForm.output_format.$invalid && convertForm.output_format.$dirty">
                                <span class="help-block mt5 ml10" ng-messages="convertForm.output_format.$error">
                                    <span ng-message="required">{{ 'APP.CONVERSION.LABEL.VALIDATION.OUTPUT.FORMAT.REQUIRED' | translate }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="output_snippet" class="control-label">
                                {{ 'APP.CONVERSION.LABEL.OUTPUT.SNIPPET' | translate }}
                            </label>
                            <textarea id="output_snippet" name="output_snippet" class="form-control" style="resize:vertical;"
                                      ng-model="parameters.output.snippet"
                                      rows="13" readonly></textarea>
                            <div ng-show="parameters.output.validated">
                                <span class="help-block mt5 ml10 pull-right"
                                      title="{{ 'APP.CONVERSION.ALTTEXT.VALIDATED' | translate }}">
                                    <i class="fa fa-check text-success"></i>
                                    <span class="text-success">{{ 'APP.CONVERSION.LABEL.OUTPUT.VALIDATED' | translate }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <span class="pull-left">
                            <button class="btn btn-default" ng-click="ctrl.clearFields(true)">
                                <i class="fa fa-close"></i>
                                <span>{{ 'APP.CONVERSION.BUTTON.CLEAR' | translate }}</span>
                            </button>
                            <button class="btn btn-primary" ng-click="ctrl.doConversion()"
                                    ng-disabled="convertForm.$pristine || convertForm.$invalid">
                                <i class="fa fa-arrow-right"></i>
                                <span>{{ 'APP.CONVERSION.BUTTON.CONVERT' | translate }}</span>
                            </button>
                        </span>
                        <span class="pull-right">
                            <button class="btn btn-danger" ng-click="ctrl.createGithubIssue()">
                                <i class="fa fa-warning"></i>
                                <span>{{ 'APP.CONVERSION.BUTTON.REPORT_PROBLEM' | translate }}</span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
